<template>
   <view class="uv-page">
      <uv-toast ref="toastRef" />
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本案例</text>
         <view>
            <uv-grid :border="false" @click="click" align="center">
               <uv-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
                  <uv-icon
                     :customStyle="{ paddingTop: 20 + 'rpx' }"
                     :name="baseListItem.name"
                     :size="22"
                  ></uv-icon>
                  <text class="grid-text">{{ baseListItem.title }}</text>
               </uv-grid-item>
            </uv-grid>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">显示边框</text>
         <view>
            <uv-grid :border="true">
               <uv-grid-item
                  v-for="(listItem, listIndex) in list"
                  :key="listIndex"
                  customStyle="padding-top: 10px; padding-bottom: 10px"
               >
                  <uv-icon
                     :customStyle="{ paddingTop: 20 + 'rpx' }"
                     :name="listItem.name"
                     :size="22"
                  ></uv-icon>
                  <text class="grid-text">{{ listItem.title }}</text>
               </uv-grid-item>
            </uv-grid>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">绑定点击事件&自定义列数</text>
         <view>
            <uv-grid :border="false" col="4">
               <uv-grid-item
                  v-for="(listItem, listIndex) in list"
                  :key="listIndex"
                  customStyle="padding-top: 10px; padding-bottom: 10px"
               >
                  <uv-icon
                     :customStyle="{ paddingTop: 20 + 'rpx' }"
                     :name="listItem.name"
                     :size="22"
                  ></uv-icon>
                  <text class="grid-text">{{ listItem.title }}</text>
               </uv-grid-item>
            </uv-grid>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">可滑动</text>
         <view>
            <swiper :indicator-dots="true" class="swiper">
               <swiper-item>
                  <uv-grid :border="true">
                     <uv-grid-item v-for="(item, index) in swiperList" :index="index" :key="index">
                        <uv-icon
                           :customStyle="{ paddingTop: 20 + 'rpx' }"
                           :name="item"
                           :size="22"
                        ></uv-icon>
                        <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
                     </uv-grid-item>
                  </uv-grid>
               </swiper-item>
               <swiper-item>
                  <uv-grid :border="true">
                     <uv-grid-item
                        v-for="(item, index) in swiperList"
                        :index="index + 9"
                        :key="index"
                     >
                        <uv-icon
                           :customStyle="{ paddingTop: 20 + 'rpx' }"
                           :name="item"
                           :size="22"
                        ></uv-icon>
                        <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
                     </uv-grid-item>
                  </uv-grid>
               </swiper-item>
               <swiper-item>
                  <uv-grid :border="true">
                     <uv-grid-item
                        v-for="(item, index) in swiperList"
                        :index="index + 18"
                        :key="index"
                     >
                        <uv-icon
                           :customStyle="{ paddingTop: 20 + 'rpx' }"
                           :name="item"
                           :size="22"
                        ></uv-icon>
                        <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
                     </uv-grid-item>
                  </uv-grid>
               </swiper-item>
            </swiper>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 响应式数据
const baseList = ref([
   {
      name: 'photo',
      title: '图片',
   },
   {
      name: 'lock',
      title: '锁头',
   },
]);

const list = ref([
   {
      name: 'photo',
      title: '图片',
   },
   {
      name: 'lock',
      title: '锁头',
   },
   {
      name: 'star',
      title: '星星',
   },
   {
      name: 'map',
      title: '地图',
   },
   {
      name: 'home',
      title: '首页',
   },
   {
      name: 'volume',
      title: '音量',
   },
]);

const swiperList = ref([
   'integral',
   'kefu-ermai',
   'coupon',
   'gift',
   'scan',
   'pause-circle',
   'volume-off',
   'email',
   'list',
]);

// ref 引用
const toastRef = ref();

// 方法
const click = (name: string | number) => {
   toastRef.value?.success(`点击了第${name}个`);
};
</script>

<style lang="scss" scoped>
.swiper {
   height: 220px;
}

.grid-text {
   font-size: 14px;
   color: #909399;
   padding: 10rpx 0 20rpx 0rpx;
   /* #ifndef APP-PLUS */
   box-sizing: border-box;
   /* #endif */
}
</style>
